<template>
  <div id="app">
    <h2>测试题</h2>
    <Subject
      v-for="item in arr"
      :key="item.id"
      :item="item"
    ></Subject>
    <div>
      <Flag
        v-for="item in arr"
        :key="item.id"
        :item="item"
      ></Flag>
    </div>
    <h3>测试用的数据打印</h3>
    <p>{{ arr }}</p>
  </div>
</template>

<script>
import Subject from "./components/Subject.vue";
import Flag from "./components/Flag.vue";
export default {
  components: {
    Subject,
    Flag,
  },
  data() {
    // 初始化空数组
    let arr = [];
    // 循环随机生成5条数据
    for (let i = 1; i <= 5; i++) {
      arr.push({
        id: i,
        num1: Math.floor(Math.random() * 10) + 1,
        num2: Math.floor(Math.random() * 10) + 1,
        state: "未完成",
      });
    }
    // 返回的给 data 的数据
    return {
      arr: arr,
    };
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>